<template>
  <div class="title">
    <div class="self-title">
      <span style="color: #1b93c4; font-size: 30px">
        <i class="el-icon-user-solid"></i>
      </span>
      <span>{{ userName }} :{{ name }}</span>
      <span>欢迎回来！</span>
      <el-button type="primary" @click="messageEdit" v-if="currentType != 9"
        >信息填报</el-button
      >
    </div>
    <div class="self-other-title">{{ userName }}</div>
    <div class="fill">
      <div class="fill-pc" v-if="!flag">
        <!-- 企业 -->
        <el-dialog
          :visible.sync="fillVisible"
          width="35%"
          class="industry"
          v-if="currentType == 11"
        >
          <h2>企业用户信息填报</h2>
          <el-form
            :model="fillForm"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="企业名称" prop="enterpriseName">
              <el-input
                v-model="fillForm.enterpriseName"
                type="text"
                placeholder="请输入企业名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属行业" prop="industry">
              <el-input
                v-model="fillForm.industry"
                type="text"
                placeholder="请输入所属行业"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司性质" prop="type">
              <el-input v-model="fillForm.type" placeholder="请输入公司性质"></el-input>
            </el-form-item>
            <el-form-item label="增值税登记号" prop="taxNo">
              <el-input
                v-model="fillForm.taxNo"
                placeholder="请输入增值税登记号"
              ></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="fillForm.address" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item label="开票名称" prop="billingName">
              <el-input
                v-model="fillForm.billingName"
                placeholder="请输入开票名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="contactUser">
              <el-input
                v-model="fillForm.contactUser"
                placeholder="请输入联系人"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button @click="fillVisible = false">取消</el-button>
            <el-button type="primary" @click="enterpriseuserUpdate()">保存</el-button>
          </div>
        </el-dialog>
        <!-- 个人顾问 -->
        <el-dialog
          :visible.sync="fillVisible"
          width="35%"
          class="personaluser"
          v-if="currentType == 12"
        >
          <h2>个人顾问信息填报</h2>
          <el-form
            :model="fillForm"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="fillForm.name" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="擅长领域" prop="expertise">
              <el-input
                v-model="fillForm.expertise"
                placeholder="请输入擅长领域"
              ></el-input>
            </el-form-item>
            <el-form-item label="从业年限" prop="bmiHistory">
              <el-input
                v-model="fillForm.bmiHistory"
                placeholder="请输入从业年限"
              ></el-input>
            </el-form-item>
            <el-form-item label="行业经验" prop="industryExperience">
              <el-input
                v-model="fillForm.industryExperience"
                placeholder="请输入行业经验"
              ></el-input>
            </el-form-item>
            <el-form-item label="学历" prop="education">
              <el-input v-model="fillForm.education" placeholder="请输入学历"></el-input>
            </el-form-item>
            <el-form-item label="毕业院校" prop="graduatedFrom">
              <el-input
                v-model="fillForm.graduatedFrom"
                placeholder="请输入毕业院校"
              ></el-input>
            </el-form-item>
            <el-form-item label="专业" prop="major">
              <el-input
                v-model="fillForm.major"
                type="text"
                placeholder="请输入专业"
              ></el-input>
            </el-form-item>
            <el-form-item label="服务方向" prop="serviceDirection">
              <el-input
                v-model="fillForm.expertise"
                placeholder="请输入服务方向"
              ></el-input>
            </el-form-item>
            <el-form-item label="生 日" prop="brithday">
              <el-input v-model="fillForm.brithday" placeholder="请输入生日"></el-input>
            </el-form-item>
            <el-form-item label="照 片" prop="photoUrl">
              <el-upload
                class="upload-demo"
                action="http://112.124.67.43:8088/iot/demand/fileUpload"
                :on-change="handleChange"
                :on-success="personaluserPhotoUrl"
                :file-list="fileListPhotoUrl"
                :limit="1"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传一个文件,如果需要上传多个文件,请上传压缩文件
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="简 历" prop="resumeFileUrl">
              <el-upload
                class="upload-demo"
                action="http://112.124.67.43:8088/iot/demand/fileUpload"
                :on-change="handleChange"
                :on-success="personaluserResumeFileUrl"
                :file-list="fileListResume"
                :limit="1"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传一个文件,如果需要上传多个文件,请上传压缩文件
                </div>
              </el-upload>
            </el-form-item>
          </el-form>

          <div class="btn">
            <el-button @click="fillVisible = false">取消</el-button>
            <el-button type="primary" @click="personaluserUpdate">保存</el-button>
          </div>
        </el-dialog>
        <!-- 合作伙伴 -->
        <el-dialog
          :visible.sync="fillVisible"
          width="35%"
          class="cooperativeuser"
          v-if="currentType == 10"
        >
          <h2>合作伙伴信息填报</h2>
          <el-form
            :model="fillForm"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="企业名称" prop="industry">
              <el-input
                v-model="fillForm.industry"
                placeholder="请输入企业名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="地址" prop="address">
              <el-input v-model="fillForm.address" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="name">
              <el-input v-model="fillForm.name" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="服务内容" prop="serviceContent">
              <el-input
                v-model="fillForm.serviceContent"
                type="text"
                placeholder="请输入服务内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="服务产品" prop="serviceProduct">
              <el-input
                v-model="fillForm.serviceProduct"
                placeholder="请输入服务产品"
              ></el-input>
            </el-form-item>
            <el-form-item label="人员规模" prop="staffSize">
              <el-input
                v-model="fillForm.staffSize"
                placeholder="请输入人员规模"
              ></el-input>
            </el-form-item>
            <el-form-item label="企业logo" prop="logoUrl">
              <el-upload
                class="upload-demo"
                action="http://112.124.67.43:8088/iot/demand/fileUpload"
                :on-change="handleChange"
                :on-success="cooperativeuserLogoUrl"
                :file-list="fileList"
                :limit="1"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  当前上传logo将会覆盖之前的logo
                </div>
              </el-upload>
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button @click="fillVisible = false">取消</el-button>
            <el-button type="primary" @click="cooperativeuserUpdate">保存</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="fill-phone">
        <div class="phone" v-if="currentType == 11" v-show="fillVisible">
          <div class="title">
            <h2>企业用户信息填报</h2>
            <span @click="fillVisible = false">
              <i class="el-icon-s-fold"></i>
            </span>
          </div>
          <ul>
            <li>
              <span>企业名称</span>
              <el-input v-model="fillForm.enterpriseName"></el-input>
            </li>
            <li>
              <span>所属行业</span>
              <el-input v-model="fillForm.industry"></el-input>
            </li>
            <li>
              <span>公司性质</span>
              <el-input v-model="fillForm.type"></el-input>
            </li>
            <li>
              <span>增值税登记号</span>
              <el-input v-model="fillForm.taxNo"></el-input>
            </li>
            <li>
              <span>地址</span>
              <el-input v-model="fillForm.address"></el-input>
            </li>
            <li>
              <span>开票名称</span>
              <el-input v-model="fillForm.billingName"></el-input>
            </li>
            <li>
              <span>联系人</span>
              <el-input v-model="fillForm.contactUser"></el-input>
            </li>
            <div class="btn action">
              <el-button type="primary" @click="fillVisible = false">取消</el-button>
              <el-button type="primary" @click="enterpriseuserUpdate">保存</el-button>
            </div>
          </ul>
        </div>
        <div class="phone" v-if="currentType == 12" v-show="fillVisible">
          <div class="title">
            <h2>个人顾问信息填报</h2>
            <span @click="fillVisible = false">
              <i class="el-icon-s-fold"></i>
            </span>
          </div>
          <ul>
            <li>
              <span>姓名</span>
              <el-input v-model="fillForm.name"></el-input>
            </li>
            <li>
              <span>擅长领域</span>
              <el-input v-model="fillForm.expertise"></el-input>
            </li>
            <li>
              <span>从业年限</span>
              <el-input v-model="fillForm.bmiHistory"></el-input>
            </li>
            <li>
              <span>行业经验</span>
              <el-input v-model="fillForm.industryExperience"></el-input>
            </li>
            <li>
              <span>学历</span>
              <el-input v-model="fillForm.education"></el-input>
            </li>
            <li>
              <span>毕业院校</span>
              <el-input v-model="fillForm.graduatedFrom"></el-input>
            </li>
            <li>
              <span>专业</span>
              <el-input v-model="fillForm.major"></el-input>
            </li>
            <li>
              <span>服务方向</span>
              <el-input v-model="fillForm.serviceDirection"></el-input>
            </li>
            <li>
              <span>生 日</span>
              <el-input v-model="fillForm.brithday" placeholder="2020/01/02"></el-input>
            </li>
            <li>
              <span>照片</span>
              <span>
                <el-upload
                  class="upload-demo"
                  action="http://112.124.67.43:8088/iot/demand/fileUpload"
                  :on-change="handleChange"
                  :on-success="personaluserPhotoUrl"
                  :file-list="fileListPhotoUrl"
                  :limit="1"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </span>
            </li>
            <li>
              <span>简历</span>
              <span>
                <el-upload
                  class="upload-demo"
                  action="http://112.124.67.43:8088/iot/demand/fileUpload"
                  :on-change="handleChange"
                  :on-success="personaluserResumeFileUrl"
                  :file-list="fileListResume"
                  :limit="1"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </span>
            </li>
            <div class="btn action">
              <el-button type="primary" @click="fillVisible = false">取消</el-button>
              <el-button type="primary" @click="personaluserUpdate">保存</el-button>
            </div>
          </ul>
        </div>
        <div class="phone" v-if="currentType == 10" v-show="fillVisible">
          <div class="title">
            <h2>合作伙伴信息填报</h2>
            <span @click="fillVisible = false">
              <i class="el-icon-s-fold"></i>
            </span>
          </div>
          <ul>
            <li>
              <span>企业名称</span>
              <el-input v-model="fillForm.industry"></el-input>
            </li>
            <li>
              <span>地址</span>
              <el-input v-model="fillForm.address"></el-input>
            </li>
            <li>
              <span>联系人</span>
              <el-input v-model="fillForm.name"></el-input>
            </li>
            <li>
              <span>服务内容</span>
              <el-input v-model="fillForm.serviceContent"></el-input>
            </li>
            <li>
              <span>服务产品</span>
              <el-input v-model="fillForm.serviceProduct"></el-input>
            </li>
            <li>
              <span>人员规模</span>
              <el-input v-model="fillForm.staffSize"></el-input>
            </li>
            <li>
              <span>企业logo</span>
              <span>
                <el-upload
                  class="upload-demo"
                  action="http://112.124.67.43:8088/iot/demand/fileUpload"
                  :on-change="handleChange"
                  :on-success="cooperativeuserLogoUrl"
                  :file-list="fileList"
                  :limit="1"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </span>
            </li>
            <div class="btn action">
              <el-button type="primary" @click="fillVisible = false">取消</el-button>
              <el-button type="primary" @click="cooperativeuserUpdate">保存</el-button>
            </div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ReqInforoId,ReqEnterpriseuserUpdate } from "../../src/request/index";
export default {
  props: {userName:{
    type:String,
    required:true
  },infoEdit:{
    type:Boolean,
    default:true
  }},
  data() {
    return {
      fillVisible: false,
      // 信息填报对象
      fillForm: {},
      // 文件列表
      fileList: [],
      fileListPhotoUrl: [],
      fileListResume: [],
      flag: false,
      currentType: -1,
      name: "",
    };
  },
  methods: {
    messageEdit() {
      if (!this.currentType) {
        this.$message({
          message: "请先登录",
          type: "error",
        });
      } else {
        this.fillVisible = true;
      }
    },
    // 企业用户信息填报保存
    async enterpriseuserUpdate() {
      this.fillForm.id = sessionStorage.getItem("id");
      this.fillForm.status = 0;
      let res = await ReqEnterpriseuserUpdate(this.fillForm);
      this.fillVisible = false;
      if (res.msg == "success") {
        this.$message({
          message: "填报成功",
          type: "success",
        });
      }
    },
    // 个人顾问信息填报保存
    async personaluserUpdate() {
      this.fillForm.id = sessionStorage.getItem("id");
      this.fillForm.status = 0;
      let res = await ReqPersonaluserUpdate(this.fillForm);
      this.fillVisible = false;
      if (res.msg == "success") {
        this.$message({
          message: "填报成功",
          type: "success",
        });
      }
    },
    // 合作伙伴信息填报保存
    async cooperativeuserUpdate() {
      this.fillForm.id = sessionStorage.getItem("id");
      this.fillForm.status = 0;
      let res = await ReqCooperativeuserUpdate(this.fillForm);
      this.fillVisible = false;
      if (res.msg == "success") {
        this.$message({
          message: "填报成功",
          type: "success",
        });
      }
    },
    // 对文件列表操作
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    // 个人顾问照片上传成功时
    personaluserPhotoUrl(response, file, fileList) {
      this.fillForm.photoUrl = response.msg;
      if (response.code == 0) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
      }
    },
    // 个人顾问简历上传成功
    personaluserResumeFileUrl(response, file, fileList) {
      this.fillForm.resumeFileUrl = response.msg;
      if (response.code == 0) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
      }
    },
    // 合作伙伴企业照片上传成功时
    cooperativeuserLogoUrl(response, file, fileList) {
      this.fillForm.logoUrl = response.msg;
      if (response.code == 0) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
      }
    },
    // 根据用户id查询用户具体信息
    async infoId() {
      // console.log(sessionStorage.getItem('id'),"hahah")
      let res = await ReqInforoId(sessionStorage.getItem("id"));
      delete res.userInfo.userInfo.id;
      // 如果没有信息填报，删除id后就为空对象
      if (JSON.stringify(res.userInfo.userInfo) == "{}" || undefined) {
        this.fillVisible = true;
        this.fillForm = {};
      } else {
        this.fillVisible = false;
        this.fillForm = res.userInfo.userInfo;
      }
    },
  },
  created() {
    this.infoId(); //获取用户信息
    this.currentType = sessionStorage.getItem("userType"); //获取用户类型
    // console.log(sessionStorage.getItem("username"));
    this.name = sessionStorage.getItem("username");
  },
};
</script>

<style scoped>
.self-title {
  height: 40px;
  padding-left: 100px;
  line-height: 40px;
  margin: 10px 0px;
}
.self-title :nth-child(1) {
}
.self-title :nth-child(2) {
  font-size: 30px;
  font-weight: 600;
  padding: 0px 15px;
  color: #f0ab00;
}
.self-title :nth-child(3) {
  font-size: 20px;
  font-weight: 600;
  color: #1b93c4;
}
.self-title :nth-child(4) {
  background: #1b93c4 !important;
  color: white !important;
  font-size: 20px !important;
}
.self-other-title {
  height: 50px;
  font-size: 18px;
  background: #333;
  text-align: center;
  line-height: 50px;
  display: none;
  color: white;
}
/* 信息填报弹窗 */
@media screen and (max-width: 768px) {
  .self-title {
    display: none;
  }
  .self-other-title {
    display: block;
  }
}
.el-radio /deep/ .el-radio__label {
  padding: 0 !important;
}
.el-dialog__body {
  padding: 0 30px !important;
}
.fill-pc {
  display: block;
}
.fill-pc h2 {
  color: white;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  margin-bottom: 10px;
}
.btn {
  display: flex;
  justify-content: center;
}
.fill-phone {
  position: absolute;
  left: 0;
  right: 0;
  top: 65px;
  bottom: 0;
  z-index: 100;
  margin: 0px auto;
  font-size: 14px;
  display: none;
}
.phone {
  background-color: rgb(255, 255, 255);
  width: 100vw;
  padding: 0 10px;
  height: 95vh;
  box-sizing: border-box;
}
.phone .title {
  display: flex;
  text-align: center;
  padding: 10px 0;
}
.phone .title :nth-child(1) {
  flex: 9;
  font-size: 18px;
  font-weight: 600;
}
.phone .title :nth-child(2) {
  flex: 1;
}
.phone ul li {
  display: flex;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
.phone ul li span {
  flex: 1;
}
.phone ul li span:nth-child(2) {
  text-align: right;
  flex: 2;
}
.phone ul li .el-input {
  width: 65%;
}
.action {
  margin-top: 25px;
}
.imgTitle {
  width: 100%;
  height: auto;
}
.Logo {
  width: 80%;
}
@media screen and (max-width: 768px) {
  .fill-pc {
    display: none;
  }
  .fill-phone {
    display: block;
  }
}
</style>
